<template>
  <div class="song-list">
    <div class="menu">
      <button class="btn">{{ tag }} <a-icon type="right" /></button>
      <ul class="list">
        <li class="list-item" @click="getSort('华语')">
          <span>华语</span>
        </li>
        <li class="list-item" @click="getSort('流行')">
          <span>流行</span>
        </li>
        <li class="list-item" @click="getSort('摇滚')">
          <span>摇滚</span>
        </li>
        <li class="list-item" @click="getSort('民谣')">
          <span>民谣</span>
        </li>
        <li class="list-item" @click="getSort('电子')">
          <span>电子</span>
        </li>
        <li class="list-item" @click="getSort('另类/独立')">
          <span>另类/独立</span>
        </li>
        <li class="list-item" @click="getSort('轻音乐')">
          <span>轻音乐</span>
        </li>
        <li class="list-item" @click="getSort('综艺')">
          <span>综艺</span>
        </li>
        <li class="list-item" @click="getSort('影视原声')">
          <span>影视原声</span>
        </li>
        <li class="list-item" @click="getSort('ACG')">
          <span>ACG</span>
        </li>
      </ul>
    </div>
    <ul class="lists">
      <Ico :isShow="isShow"></Ico>
      <li
        class="album-item"
        v-for="(item, i) in lists"
        :key="i"
        @click="transition(item.id)"
      >
        <img :src="item.picUrl || item.coverImgUrl" alt="" />
        <div class="desc">
          {{ item.name }}
        </div>
        <div class="play-count">
          <a-icon type="play-circle" />
          <span class="word ofh">{{ resolveCount(item.playCount) }}</span>
        </div>
        <div class="user ofh">
          <a-icon type="user" class="ico" />
          {{ item.copywriter || item.description }}
        </div>
      </li>
    </ul>
    <a-pagination
      style="
        margin: 0 auto;
        width: 55rem;
        margin-bottom: 2rem;
        display: flex;
        justify-content: center;
      "
      v-show='shoPage'
      :default-current="1"
      :pageSize="40"
      :total="500"
      @change="onChange"
    />
  </div>
</template>

<script>
import axios from "@/utils/axios";
import Ico from "@/components/content/common/Loading.vue";
export default {
  name: "SongList",
  data() {
    return {
      lists: [],
      isShow: "block",
      tag: "全部歌单",
      shoPage: false,
    };
  },
  components: {
    Ico,
  },
  methods: {
    // 页数改变时
    async onChange(pageNum, pageSize) {
      console.log(pageNum, pageSize);
      // 让分页隐藏
      this.lists = [];
      this.shoPage = false;
      this.isShow = "block";
      const r = await axios.get("/top/playlist", {
        params: { limit: pageSize, offset: pageNum * pageSize },
      });
      this.lists = r.playlists;
      // 让分页显示
      this.shoPage = true;
      this.isShow = "none";
    },
    resolveCount(count) {
      if (typeof count === "number") {
        return count > 10000 ? count.toString().slice(0, 2) + "万" : count;
      }
    },
    //跳转到歌单详情页面
    transition(id) {
      if (id) {
        this.$router.push("/main/listDetail/" + id);
      }
    },
    // 获取全部歌曲
    sendList(name) {
      this.shoPage = false;
      axios.get(name, { params: { limit: 40, offset: 40 } }).then((res) => {
        this.lists = res.result;
        this.isShow = "none";
        this.shoPage = true;
      });
    },
    // 获取分类
    getSort(name) {
      this.shoPage = false;
      this.isShow = "block";
      this.tag = name;
      this.lists = [];
      axios
        .get("/top/playlist", { params: { limit: 100, cat: name } })
        .then((res) => {
          this.lists = res.playlists;
          this.isShow = "none";
          this.shoPage = true;
        });
    },
  },
  created() {
    this.sendList("personalized");
    //  获取全部歌曲
  },
};
</script>

<style lang="scss" scoped>
.song-list {
  .menu {
    display: flex;
    justify-content: space-between;
    .btn {
      width: 10rem;
      height: 3rem;
      text-align: center;
      border: 1px solid #ccc;
      border-radius: 2rem;
    }
    .list {
      display: flex;
      .list-item {
        margin: 0 0.8rem;
        cursor: pointer;
      }
    }
  }
  .lists {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 1.4rem;
    margin-bottom: 0;
    .album-item {
      position: relative;
      width: 18rem;
      height: 24rem;
      cursor: pointer;
      img {
        width: 18rem;
        height: 18rem;
        border-radius: 1rem;
      }
      .desc {
        height: 4.2rem;
        overflow: hidden;
      }
      .play-count {
        position: absolute;
        top: 0.5rem;
        right: 0.5rem;
        color: #fff;
      }
      .user {
        width: 14rem;
        position: absolute;
        bottom: 6.5rem;
        left: 0.5rem;
        color: #fff;
        font-size: 0.7rem;
        .ico {
          font-size: 1.3rem;
        }
      }
    }
  }
}
</style>